<template>
    <div>
        <!--header-->
        <div class="header">
            <div class="container">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <h1 class="navbar-brand"><a href="index.html">Yummy</a></h1>
                    </div>
                    <!--navbar-header-->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li><router-link to="/"  exact>Home</router-link></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Birthday<b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-4">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h4>By Relation</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Friend</router-link></li>
                                                <li><router-link class="list" to="cake">Lover</router-link></li>
                                                <li><router-link class="list" to="cake">Sister</router-link></li>
                                                <li><router-link class="list" to="cake">Brother</router-link></li>
                                                <li><router-link class="list" to="cake">Kids</router-link></li>
                                                <li><router-link class="list" to="cake">Parents</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>By Flavour</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Chocolate</router-link></li>
                                                <li><router-link class="list" to="cake">Mixed Fruit</router-link></li>
                                                <li><router-link class="list" to="cake">Butterscotch</router-link></li>
                                                <li><router-link class="list" to="cake">Strawberry</router-link></li>
                                                <li><router-link class="list" to="cake">Vanilla</router-link></li>
                                                <li><router-link class="list" to="cake">Eggless Cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>By Theme</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Heart shaped</router-link></li>
                                                <li><router-link class="list" to="cake">Cartoon Cakes</router-link></li>
                                                <li><router-link class="list" to="cake">2-3 Tier Cakes</router-link></li>
                                                <li><router-link class="list" to="cake">Square shape</router-link></li>
                                                <li><router-link class="list" to="cake">Round shape</router-link></li>
                                                <li><router-link class="list" to="cake">Photo cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>Weight</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">1 kG</router-link></li>
                                                <li><router-link class="list" to="cake">1.5 kG</router-link></li>
                                                <li><router-link class="list" to="cake">2 kG</router-link></li>
                                                <li><router-link class="list" to="cake">3 kG</router-link></li>
                                                <li><router-link class="list" to="cake">4 kG</router-link></li>
                                                <li><router-link class="list" to="cake">Large</router-link></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li class="dropdown grid">
                                <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">Wedding<b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-4">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h4>By Relation</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Friend</router-link></li>
                                                <li><router-link class="list" to="cake">Lover</router-link></li>
                                                <li><router-link class="list" to="cake">Sister</router-link></li>
                                                <li><router-link class="list" to="cake">Brother</router-link></li>
                                                <li><router-link class="list" to="cake">Kids</router-link></li>
                                                <li><router-link class="list" to="cake">Parents</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>By Flavour</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Chocolate</router-link></li>
                                                <li><router-link class="list" to="cake">Mixed Fruit</router-link></li>
                                                <li><router-link class="list" to="cake">Butterscotch</router-link></li>
                                                <li><router-link class="list" to="cake">Strawberry</router-link></li>
                                                <li><router-link class="list" to="cake">Vanilla</router-link></li>
                                                <li><router-link class="list" to="cake">Eggless Cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>By Theme</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Heart shaped</router-link></li>
                                                <li><router-link class="list" to="cake">Cartoon Cakes</router-link></li>
                                                <li><router-link class="list" to="cake">2-3 Tier Cakes</router-link></li>
                                                <li><router-link class="list" to="cake">Square shape</router-link></li>
                                                <li><router-link class="list" to="cake">Round shape</router-link></li>
                                                <li><router-link class="list" to="cake">Photo cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>Weight</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">1 kG</router-link></li>
                                                <li><router-link class="list" to="cake">1.5 kG</router-link></li>
                                                <li><router-link class="list" to="cake">2 kG</router-link></li>
                                                <li><router-link class="list" to="cake">3 kG</router-link></li>
                                                <li><router-link class="list" to="cake">4 kG</router-link></li>
                                                <li><router-link class="list" to="cake">Large</router-link></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li class="dropdown grid">
                                <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">Special Offers <b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-4">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h4>By Relation</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Friend</router-link></li>
                                                <li><router-link class="list" to="cake">Lover</router-link></li>
                                                <li><router-link class="list" to="cake">Sister</router-link></li>
                                                <li><router-link class="list" to="cake">Brother</router-link></li>
                                                <li><router-link class="list" to="cake">Kids</router-link></li>
                                                <li><router-link class="list" to="cake">Parents</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>By Flavour</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Chocolate</router-link></li>
                                                <li><router-link class="list" to="cake">Mixed Fruit</router-link></li>
                                                <li><router-link class="list" to="cake">Butterscotch</router-link></li>
                                                <li><router-link class="list" to="cake">Strawberry</router-link></li>
                                                <li><router-link class="list" to="cake">Vanilla</router-link></li>
                                                <li><router-link class="list" to="cake">Eggless Cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>By Theme</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Heart shaped</router-link></li>
                                                <li><router-link class="list" to="cake">Cartoon Cakes</router-link></li>
                                                <li><router-link class="list" to="cake">2-3 Tier Cakes</router-link></li>
                                                <li><router-link class="list" to="cake">Square shape</router-link></li>
                                                <li><router-link class="list" to="cake">Round shape</router-link></li>
                                                <li><router-link class="list" to="cake">Photo cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-3">
                                            <h4>Weight</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">1 kG</router-link></li>
                                                <li><router-link class="list" to="cake">1.5 kG</router-link></li>
                                                <li><router-link class="list" to="cake">2 kG</router-link></li>
                                                <li><router-link class="list" to="cake">3 kG</router-link></li>
                                                <li><router-link class="list" to="cake">4 kG</router-link></li>
                                                <li><router-link class="list" to="cake">Large</router-link></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li class="dropdown grid">
                                <a href="#" class="dropdown-toggle list1" data-toggle="dropdown">Store<b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-3">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <h4>By Relation</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Friend</router-link></li>
                                                <li><router-link class="list" to="cake">Lover</router-link></li>
                                                <li><router-link class="list" to="cake">Sister</router-link></li>
                                                <li><router-link class="list" to="cake">Brother</router-link></li>
                                                <li><router-link class="list" to="cake">Kids</router-link></li>
                                                <li><router-link class="list" to="cake">Parents</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4">
                                            <h4>By Flavour</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Chocolate</router-link></li>
                                                <li><router-link class="list" to="cake">Mixed Fruit</router-link></li>
                                                <li><router-link class="list" to="cake">Butterscotch</router-link></li>
                                                <li><router-link class="list" to="cake">Strawberry</router-link></li>
                                                <li><router-link class="list" to="cake">Vanilla</router-link></li>
                                                <li><router-link class="list" to="cake">Eggless Cakes</router-link></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4">
                                            <h4>Specials</h4>
                                            <ul class="multi-column-dropdown">
                                                <li><router-link class="list" to="cake">Ice cream cake</router-link></li>
                                                <li><router-link class="list" to="cake">Swiss roll</router-link></li>
                                                <li><router-link class="list" to="cake">Ruske kape</router-link></li>
                                                <li><router-link class="list" to="cake">Cupcakes</router-link></li>
                                                <li><router-link class="list" to="cake">Muffin</router-link></li>
                                                <li><router-link class="list" to="cake">Merveilleux</router-link></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                        </ul>
                        <!--/.navbar-collapse-->
                    </div>
                    <!--//navbar-header-->
                </nav>
                <div class="header-info">
                    <div class="header-right search-box">
                        <a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                        <div class="search">
                            <form class="navbar-form">
                                <input type="text" class="form-control">
                                <button type="submit" class="btn btn-default" aria-label="Left Align">
                                    Search
                                </button>
                            </form>
                        </div>
                    </div>
                    <!-- 个人信息 -->
                    <div class="header-right login dropdown">
                        <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><router-link to="login">登录</router-link></li>
                            <li role="separator" class="divider"></li>
                            <li><router-link to="register">注册</router-link></li>
                          </ul>
                    </div>
                    <div class="header-right cart">
                        <a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
                        <div class="cart-box">
                            <h4><router-link to="cart">
                                <span class="simpleCart_total">$0.00</span> (<span id="simpleCart_quantity" class="simpleCart_quantity">0</span>)
                            </router-link></h4>
                            <p><a href="javascript:;" class="simpleCart_empty">Empty cart</a></p>
                            <div class="clearfix"> </div>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <!--//header-->
        <router-view></router-view>
        <!--footer-->
        <div class="footer">
            <div class="container">
                <div class="footer-grids">
                    <div class="col-md-2 footer-grid">
                        <h4>company</h4>
                        <ul>
                            <li><a href="products.html">products</a></li>
                            <li><a href="#">Work Here</a></li>
                            <li><a href="#">Team</a></li>
                            <li><a href="#">Happenings</a></li>
                            <li><a href="#">Dealer Locator</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2 footer-grid">
                        <h4>service</h4>
                        <ul>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Warranty</a></li>
                            <li><a href="contact.html">Contact Us</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3 footer-grid">
                        <h4>order &amp; returns</h4>
                        <ul>
                            <li><a href="#">Order Status</a></li>
                            <li><a href="#">Shipping Policy</a></li>
                            <li><a href="#">Return Policy</a></li>
                            <li><a href="#">Digital Gift Card</a></li>
                        </ul>
                    </div>
                    <div class="col-md-2 footer-grid">
                        <h4>legal</h4>
                        <ul>
                            <li><a href="#">Privacy</a></li>
                            <li><a href="#">Terms and Conditions</a></li>
                            <li><a href="#">Social Responsibility</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3 footer-grid icons">
                        <h4>Connect with Us</h4>
                        <ul>
                            <li><a href="#"><img src="../assets/images/i1.png" alt="">Follow us on Facebook</a></li>
                            <li><a href="#"><img src="../assets/images/i2.png" alt="">Follow us on Twitter</a></li>
                            <li><a href="#"><img src="../assets/images/i3.png" alt="">Follow us on Google-plus</a></li>
                            <li><a href="#"><img src="../assets/images/i4.png" alt="">Follow us on Pinterest</a></li>
                        </ul></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

        <!--//footer-->
        <div class="footer-bottom">
            <div class="container">
                <p>Copyright © 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style>
</style>
